<template>
    <div>
        <!-- 面包屑导航区域 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图区域 -->
        <el-card>
            <el-row>
                <el-col>
                    <el-button type="primary" @click="showAddCatDialog">添加分类</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <tree-table
            class="treetable"
            :data="catelist"
            :selection-type="false"
            :expand-type="false"
            :show-index="true"
            index-text="#"
            border
            :show-row-hover="false"
            :columns="columns">
                <!-- 是否有效 -->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" 
                    v-if="scope.row.cat_deleted === false"
                    style="color: lightgreen"></i>
                    <i class="el-icon-error"
                    style="color: red" 
                    v-else></i>
                </template> 
                <!-- 排序 -->
                <template slot="order" slot-scope="scope">
                    <el-tag v-if="scope.row.cat_level === 0">一级</el-tag>
                    <el-tag type="success" v-if="scope.row.cat_level === 1">二级</el-tag>
                    <el-tag type="warning" v-if="scope.row.cat_level === 2">三级</el-tag>
                </template>  
                <!-- 操作 -->
                <template slot="opt" slot-scope="scope">
                    <el-button type="primary" icon="el-icon-edit" size="mini" @click="editSort(scope.row.cat_id)">编辑</el-button>
                    <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteSort(scope.row.cat_id)">删除</el-button>
                </template>
            </tree-table>
            <!-- 分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[3, 5, 8, 10]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>
        <!-- 添加分类卡片 -->
        <el-dialog
        title="添加分类"
        :visible.sync="addCatDialogVisible"
        @close="addCatDialogClosed" 
        width="30%">
            <el-form :model="addCatForm"
             :rules="addCatFormRules" 
             ref="addCatFormRef"
             label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCatForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类">
                    <!-- options 用来指定数据源 -->
                    <!-- props 用来指定配置对象 -->
                    <el-cascader
                    class="cascader"
                    expand-trigger="hover"
                    v-model="selecteKeys"
                    :options="parentCateList"
                    :props="cascaderProps"
                    clearable
                    change-on-select
                    @change="parentCateChanged">
                    </el-cascader>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addCatDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑操作 -->
        <el-dialog
        title="编辑分类"
        :visible.sync="editDialogVisible"
        width="30%">
            <el-form 
            :model="editForm" 
            :rules="editFormRules" 
            ref="editFormRule" 
            label-width="100px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="editForm.cat_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addSort">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
export default {
    data() {
        return {
            // 获取商品列表参数
            queryInfo: {
                type: '',
                pagenum: 1,
                pagesize: 5
            },
            // 商品分类数据
            catelist: [],
            // 总的数据条数
            total: 0,
            columns: [
                {
                    label: '分类名称',
                    prop: 'cat_name',
                },
                {
                    label: '是否有效',
                    // 表示，将当前列定义为模板列
                    type: 'template',
                    // 表示当前这一列使用模板名称
                    template: 'isok'
                },
                {
                    label: '排序',
                    // 表示，将当前列定义为模板列
                    type: 'template',
                    // 表示当前这一列使用模板名称
                    template: 'order'
                },
                {
                    label: '操作',
                    // 表示，将当前列定义为模板列
                    type: 'template',
                    // 表示当前这一列使用模板名称
                    template: 'opt'
                }
            ],
            // 添加分类显示与隐藏
            addCatDialogVisible: false,
            // 添加分类的表单对象
            addCatForm: {
                cat_name: '',
                // 腹肌分类id
                cat_pid: 0,
                // 分类的等级，默认要添加的是1级分类
                cat_level: 0
            },
            // 添加分类的条件
            addCatFormRules: {
                cat_name: [
                    {
                        required: true,
                        message: '请输入分类名称', 
                        trigger: 'blur'  
                    },
                    { 
                        min: 1, 
                        max: 10, 
                        message: '长度在 1 到 10 个字符', 
                        trigger: 'blur' 
                    }
                ]
            },
            // 父级分类
            parentCateList: [],
            // 指定级联选择器的配置对象
            cascaderProps: {
                value: 'cat_id',
                label: 'cat_name',
                children: 'children'
            },
            // 选中父级分类中的id
            selecteKeys: [],
            // 编辑分类的显示与隐藏
            editDialogVisible: false,
            // 编辑分类id获取的数据
            editForm: {},
            // 分类名称编辑的规则
            editFormRules: {
                cat_name: [
                    {
                        required: true, 
                        message: '请输入分类名称',
                        trigger: 'blur'
                    },
                    { 
                        min: 1, 
                        max: 10, 
                        message: '长度在 1 到 10 个字符', 
                        trigger: 'blur' 
                    } 
                ]
            }
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        // 获取商品分类数据
        async getCateList() {
            const {data: res} = await this.$http.get('categories',{params: this.queryInfo})
            if(res.meta.status !== 200){
                this.$message.error("获取分类数据失败")
            }
            // 把数据列表赋值给 catelist
            this.catelist = res.data.result
            // 为总数据条数赋值
            this.total = res.data.total
        },
        // 每页显示的条数
        handleSizeChange(newSize) {
            this.queryInfo.pagesize = newSize
            this.getCateList()
        },
        // 当前页码
        handleCurrentChange(newPage) {
            this.queryInfo.pagenum = newPage
            this.getCateList()
        },
        // 点击按钮，显示添加分类
        showAddCatDialog() {
            // 调用父级分类函数
            this.getParentCatList()
            // 再显示添加分类
            this.addCatDialogVisible = true
        },
        // 获取父级分类
        async getParentCatList() {
            const {data: res} = await this.$http.get('categories',{
                param: {type: 2 }
            })
            console.log(res);
            if(res.meta.status !== 200) return this.$message.error("获取分级失败")
            this.parentCateList = res.data
        },
        parentCateChanged() {
            // 如果 selectedKeys 数组中的 length 大于0，证明选中的父级分类
            // 反之，就说明没有选中任何父级分类
            if(this.selecteKeys.length > 0){
                // 父级分类ID
                this.addCatForm.cat_pid = this.selecteKeys[this.selecteKeys.length - 1]
                // 当前分类的等级赋值
                this.addCatForm.cat_level = this.selecteKeys.length
                return
            }else{
                // 父级分类ID
                this.addCatForm.cat_pid = 0
                // 当前分类的等级赋值
                this.addCatForm.cat_level = 0
            }
        },
        // 点击按钮，添加新的分类
        addCate() {
            console.log(this.addCatForm);
            // 校验表单并添加分类
            this.$refs.addCatFormRef.validate(async valid => {
                if(!valid) return 
                const {data: res} = await this.$http.post('categories',this.addCatForm)
                if(res.meta.status !== 201){
                    return this.$message.error("添加分类失败")
                }
                this.$message.success("添加分类成功")
                this.getCateList()
                this.addCatDialogVisible = false
            })
        },
        // 监听对话框关闭事件
        addCatDialogClosed() {
            this.$refs.addCatFormRef.resetFields()
            this.selecteKeys = []
            this.addCatForm.cat_pid = 0
            this.addCatForm.cat_level = 0
        },
        // 点击编辑按钮,展示对应的分类
        async editSort(id) {
            // console.log(id);
            this.editDialogVisible = true
            const {data: res} = await this.$http.get(`categories/` + id)
            // console.log(res);
            if(res.meta.status !== 200){
                return this.$message.error("获取id分类失败")
            }
            this.editForm = res.data
        },
        // 编辑按钮进行修改
        addSort() {
            this.$refs.editFormRule.validate(async valid => {
                if(!valid) return 
                const {data: res} = await this.$http.put(`categories/` + this.editForm.cat_id,{
                    cat_name: this.editForm.cat_name
                })
                if(res.meta.status !== 200) {
                    return this.$message.error("编辑分类名称失败")
                }
                this.$message.success("编辑分类名称成功")
                this.getCateList()
                this.editDialogVisible = false
            })
        },
        // 删除对应ID的分类
        async deleteSort(id) {
            const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).catch(err => err)

            console.log(confirmResult);
            if(confirmResult !== 'confirm') return this.$message.info("已取消删除")
            const {data: res} = await this.$http.delete(`categories/` + id)
            if(res.meta.status !== 200){
                return this.$message.error("删除分类失败")
            }
            this.$message.success("删除分类成功")
            this.getCateList()

        }
    },
}
</script>

<style lang="less" scoped>
.treetable{
    margin-top: 15px;
    width: 1250px;
}
</style>